<template>
	<!-- 动态导航 -->
	<view>
		<uniNavBar :fixed="true" :statusBar="true"  @clickRight="goRelease">
			<!-- 左边 -->
			<block slot="left">
				<view class="left-icon ml10">
					<view class="icon iconfont icon-qiandao"></view>
				</view>
			</block>
			<!-- 中间 -->
			<view class="nav-tab-bar flex-row align-item">
				<block v-for="(item, index) in tabBars" :key="index">
					<view @tap="tabTap(index)" :class="{ 'active': tabIndex == index }">{{ item.name }}</view>
				</block>
			</view>
			<!-- 右边 -->
			<block slot="right">
				<view class="right-icon flex-end" style="justify-content: flex-end;">
					<view class="icon iconfont icon-bianji1"></view>
				</view>
			</block>
		</uniNavBar>
	</view>
</template>

<script>
	import uniNavBar from '../uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniNavBar
		},
		props: {
			tabBars: Array,
			tabIndex: Number
		},
		methods:{
			tabTap(index) {
				this.$emit('tabTap', index)
			},
			// 跳转到发布页
			goRelease() {
				uni.navigateTo({
					url: '../add-input/add-input'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
/* 导航 */
.left-icon{
	.icon-qiandao{
		font-size: 48upx;
		color: #ff9619;
	}
}
.right-icon{
	width: 80%;
	.icon-bianji1{
		font-size: 48upx;
		color: #333333;
	}
}
.nav-tab-bar{
	view {
		font-size: 32upx;
		padding: 0 5upx;
		font-weight: 600;
		color: #969696;
		margin: 0 10upx;
		border-bottom: 5upx solid #FFFFFF;
	}
	.active {
		color: #333333;
		border-bottom-color: #FEDE39;
	}
}

</style>
